<template>
    <div style="width: 102%;" class="box-card">
        <div slot="header" style="display: flex;">
            <div style="flex: 1; font-size: 20px; display: flex">
                <span :class="collapseBtnClass" style="cursor: pointer; line-height: 60px;" @click="collapse"></span>
                
                <!--面包屑-->
                <el-breadcrumb style="cursor: pointer; line-height: 60px; margin-left: 8px;">
                    <el-breadcrumb-item>{{ breadInfo.top }}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ breadInfo.sub }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-dropdown>
                <span class="el-dropdown-link" style="color: black;">
                    <el-avatar :size="30" :src="luckyImg" style="position: relative; top: 10px"></el-avatar>
                      <span style="margin: 0 10px 0 10px;">欢迎您，{{ user.nickname }}</span>
                    <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                </span>
                <template #dropdown style="margin-top: 20px">
                    <el-dropdown-menu>
                        <el-dropdown-item icon='el-icon-s-custom' @click.native="openScreen">系统大屏</el-dropdown-item>
                        <el-dropdown-item icon='el-icon-wallet' @click.native="dOptSsoLogin">数字运营</el-dropdown-item>
                        <el-dropdown-item icon='el-icon-s-custom' @click.native="personalMsg">个人信息</el-dropdown-item>
                        <el-dropdown-item icon='el-icon-switch-button' @click.native="signOut">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        
        <!--卡片面板的主内容-->
        <div class="header-tags">
            <el-tag @close="handleClose(index)" v-for="(item,index) in tags"
                    type="info" size="small" :key="index" :class="item.highlight ? 'active' : ''"
                    :closable="item.name !== '系统首页'" @click="changeHighlightTag(item.name)"
                    effect="plain">
                <i class="el-icon-s-opportunity" style="margin-right: 2px"
                   v-if="item.highlight"></i>
                {{ item.name }}
            </el-tag>
        </div>
    </div>
</template>

<script>
import {logout} from "@/api/index/login";
import luckyImg from '@/assets/img/sculpture/admin.jpeg'

export default {
    name: "Header",
    props: {
        user: Object,
        collapseBtnClass: String,
        breadInfo: Object,
        tags: Array,
        activeMenu: String,
    },
    data() {
        return {
            luckyImg: luckyImg,
            menus: {},
        }
    },
    created() {
        let menusStr = sessionStorage.getItem("manage-menus") || "{}"
        this.menus = JSON.parse(menusStr)
    },
    methods: {
        signOut() { // 退出方法
            let user = sessionStorage.getItem("manage-user") ? JSON.parse(sessionStorage.getItem("manage-user")) : {};
            if (Object.keys(user).length === 0) {
                return
            }
            logout(user.id).then(res => {
                if (res.code == 200) {
                    sessionStorage.removeItem("manage-token")
                    sessionStorage.removeItem("manage-user")
                    sessionStorage.removeItem("manage-userName")
                    sessionStorage.removeItem("manage-menus")
                    this.$router.push("/login")
                }
            })
        },
        collapse() { // 菜单收缩
            this.$emit('collapse'); // 调用父界面的 收缩方法
        },
        //  个人信息
        personalMsg() {
            this.$router.push("/system/user")
        },
        
        // 关闭tag标签
        handleClose (index) {//当前点击的tag的下标
            this.$emit('handleClose', index); // 调用父界面的 收缩方法
        },
        
        //处理高亮的tag
        changeHighlightTag (curMenuName) {//当前需要高亮的名字
            this.$emit('changeHighlightTag', curMenuName); // 调用父界面的 收缩方法
        },
        
        // 打开大屏
        openScreen() {
            let routeUrl = this.$router.resolve({
                path: '/screen'// 这里的路径就可以正常的写，不需要添加_blank: true
            })
            window.open(routeUrl.href, '_blank')
        },
        
        // 数字运营平台单点登录
        dOptSsoLogin() {
            window.open('http://localhost:8084/login/dOpt?token=token', '_blank')
        },
    }
}
</script>

<style scoped>

/*  tag的高亮*/
.active[data-v-61dd7a3d]  {
    background-color: #67c23a;
    color: white;
}

.header-tags {
    text-align: left;
}

</style>
